<template>
  <!-- 总的 -->
  <div>
    <!-- 表格 -->
    <div v-loading="loading">
      <el-table
        :row-class-name="xxxTableRowClassName"
        v-loading="isLoading"
        :data="tableData"
        element-loading-text="Loading"
        :header-cell-style="{
          background: 'rgba(61,157,255,0.05)',
          color: '#333333',
        }"
        fit
        highlight-current-row
      >
        <el-table-column
          prop="learningTaskName"
          label="作业名称"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="status" label="作业状态" align="center">
          <template slot-scope="scope">
            <span
              :style="{
                color:
                  scope.row.status == 0
                    ? '#666'
                    : scope.row.status == 1
                    ? '#1890FF'
                    : '#FF1818',
              }"
            >
              {{
                scope.row.status == 0
                  ? "待审核"
                  : scope.row.status == 1
                  ? "通过"
                  : "未通过"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="查看详情" align="center">
          <template slot-scope="{ row }">
            <el-button size="small" plain type="primary" @click="handle(row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="paging">
      <pagination-page @size="changeSize" @page="changePage" :total="total" />
    </div>
    <!-- 遮罩层 -->
    <div>
      <el-dialog
        title="学习作业审核详情"
        disabled
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" label-width="90px" :rules="rules">
          <!-- 作业名称 -->
          <div class="box">
            <el-row>
              <el-col :span="12">
                <el-form-item label="名称" prop="name">
                  <el-input
                    disabled
                    v-model="form.name"
                    placeholder="请输入姓名"
                    style="width: 97%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="适合人群" prop="region">
                  <el-input
                    disabled
                    style="width: 50%"
                    v-model="form.region"
                    placeholder="班级"
                  ></el-input>

                  <el-select
                    disabled
                    v-model="form.gits"
                    placeholder="性别"
                    style="width: 50%"
                  >
                    
                    <el-option label="全性别" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <!-- 封面图 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="图片" prop="image">
                <img
                  style="
                    width: auto;
                    height: auto;
                    max-height: 100%;
                    max-width: 100%;
                  "
                  :src="$store.state.user.BASE_URL + form.image"
                  alt=""
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简介" prop="synopsis">
                <el-input
                  disabled
                  type="textarea"
                  v-model="form.synopsis"
                  :autosize="{ minRows: 6.5, maxRows: 6.5 }"
                  resize="none"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 视频 -->
          <el-form-item label="视频" prop="video" style="width: 70%">
            <video
              style="width: 250px; height: 150px"
              :src="$store.state.user.BASE_URL + form.video"
              class="avatar video-avatar"
              controls="controls"
            >
              您的浏览器不支持视频播放
            </video>
            <p class="Upload_pictures">
              <span></span>
            </p>
          </el-form-item>
          <!-- 单选 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核" v-if="form.status == 0">
                <el-radio v-model="radio" label="1">通过</el-radio>
                <el-radio v-model="radio" label="2">不通过</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item
            label="不通过原因"
            prop="textarea"
            v-if="this.radio == 2"
          >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              resize="none"
              v-model="form.textarea"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="form.status == 0">
          <el-button @click="dialogVisible = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="save" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  homeworkAuditList,
  // 审核详情
  homeworkAuditDetails,
  learningWorkPass,
} from "@/api/platformAudit";
export default {
  data() {
    return {
      isLoading: false,
      loading: false,
      rules: {
        // 作业名称
        name: [
          {
            required: true,
            message: "请输入作业名称",
            trigger: "blur",
          },
        ],
        // 适合班级
        region: [
          {
            required: true,
            message: "请输入班级",
            trigger: "blur",
          },
        ],
        // 简介
        synopsis: [
          {
            required: true,
            message: "请输入简介",
            trigger: "blur",
          },
        ],
        //  图片
        image: [
          {
            required: true,
            message: "请上传图片",
            trigger: "blur",
          },
        ],
        // 视频
        video: [
          {
            required: true,
            message: "请上传视频",
            trigger: "blur",
          },
        ],
        textarea: [
          {
            required: true,
            message: "请输入审核原因",
            trigger: "blur",
          },
        ],
      },
      total: -1,
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      page: {
        pageSize: 10,
        pageNum: 1,
      },

      radio: "1",
      dialogVisible: false,
      rules: {
        textarea: [
          {
            validator: this.validatePhone,
            trigger: "blur",
          },
        ],
      },
      tableData: [],
      form: {
        desc: "",
        name: "",
        gits: "",
        region: "",
        synopsis: "",
        textarea: "",
      },

      learningTaskId: null,
    };
  },

  created() {
    this.gethomeworkAuditList();
  },
  methods: {
    validatePhone(rule, value, callback) {
      if (!this.form.textarea && this.radio == 2) {
        callback(new Error("请说明原因"));
      } else {
        callback(); // 通过
      }
    },
    save() {
      this.$refs.form.validate((e) => {
        if (e) {
          this.dialogVisible = false;
          let data = {
            learningTaskId: this.learningTaskId,
            status: this.radio,
            checkInfo: this.form.textarea,
          };
          learningWorkPass(data).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.gethomeworkAuditList();
            }
          });
        }
      });
    },
    handle(row) {
      this.radio = "1";
      this.form.textarea = "";
      this.learningTaskId = row.learningTaskId;
      let data = {
        learningTaskId: row.learningTaskId,
      };
      homeworkAuditDetails(data).then((res) => {
        if (res.code == 200) {
          this.form.name = res.result.learningTaskName;
          this.form.gits = res.result.sex;
          this.form.synopsis = res.result.tips;
          this.form.region = res.result.gradeName;
          this.form.image = res.result.image;
          this.form.video = res.result.video;
          this.form.status = res.result.status;
        }
      });

      this.dialogVisible = true;
    },
    changeSize(size) {
      this.page.pageSize = size;
      this.gethomeworkAuditList();
    },
    changePage(page) {
      this.page.pageNum = page;
      this.gethomeworkAuditList();
    },
    gethomeworkAuditList() {
      let data = { ...this.page };
      this.isLoading = true;
      homeworkAuditList(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result.list;
          this.total = res.result.total;
        }
        this.isLoading = false;
      });
    },
    xxxTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.paging {
  display: flex;
  justify-content: flex-end;
}
.box {
  display: flex;
  justify-content: space-between;
}
.topst {
  display: flex;
}
.imgs {
  width: 250px;
  height: 110px;
}
.video {
  width: 250px;
  height: 110px;
}
::v-deep .el-upload-dragger {
  width: 250px;
  height: 150px;
}
::v-deep .el-dialog__body {
  padding: 15px 60px;
}

::v-deep .element.style {
  margin-left: 47px;
}
</style>
